<template>
    <div>
        <div class="conta_main">
            <el-table
                :data="dataList['list1'] && dataList['list1']['classList']" 
                border
                highlight-current-row 
                class="table tablePadding" 
                ref="multipleTable" 
                show-summary :summary-method="getSummaries"
                :header-cell-style="{background: '#f1f1f1', color: '#333',borderColor: 'rgb(193 193 193)','text-align': 'center'}" 
            >
                <el-table-column label="班级" prop="className" align="center" header-align="center" fixed>
                    <template slot-scope="scope">
                        <el-button type="text" @click="toClassKanban(scope.row)" class="idAddName">{{scope.row.className}}</el-button>   
                    </template>
                </el-table-column>
                <el-table-column :label="item.name" prop="" align="right" header-align="center"
                    v-for="(item,indexs) in subjectName" :key="'subj'+indexs">
                    <el-table-column label="平均分" :prop="'avg'+item.value" align="right" header-align="center" ></el-table-column>
                    <el-table-column label="标准差" :prop="'std'+item.value" align="right" header-align="center" ></el-table-column>
                    <el-table-column label="标准分" :prop="'ss'+item.value" align="right" header-align="center" ></el-table-column>
                    <el-table-column label="差异系数" :prop="'cyxs'+item.value" align="right" header-align="center" ></el-table-column>
                    <el-table-column label="任课教师" :prop="'teacherName'+item.value" align="center" header-align="center" ></el-table-column>
                </el-table-column>
            </el-table>
            <div class="class_two" style="margin-top: 100px;">
                <div v-for="(item,index) in className" :key="index" >
                    <div>{{item}}</div>
                    <div style="display: flex;">
                        <div :id="'class'+index +'0'" style="flex:1;height: 300px;"></div>
                        <div :id="'class'+index +'1'" style="flex:1;height: 300px;"></div>
                    </div>
                </div>
                <div v-for="(item,index) in subjectName" :key="'biaozhunf'+index" >
                    <div>各班标准分对比：{{item.name}}</div>
                    <div :id="'subject'+index" style="height:300px;"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {barLine} from '@/components/echarts/barLine';//带有平均值辅助线的柱状图
import {radarChart} from '@/components/echarts/radarChart';//雷达
export default {
    name: 'classBalance5',//班级科目均衡性
    props: {
        dataList: Object,
        searchForm: Object,
    },
    data() {
        return {
            searchForms: {},
            subjectName: [
                {name:'语文',value: 101},
                {name:'数学',value: 102},
                {name:'英语',value: 103},
                {name:'物理',value: 104},
                {name:'化学',value: 105},
                {name:'生物',value: 106},
                {name:'历史',value: 107},
                {name:'地理',value: 108},
                {name:'政治',value: 109}
            ],
            className: [],//班级
        }
    },
    mounted(){
        this.searchForms = this.searchForm;
    },
    watch: {
        'searchForms.queryTypes': {
            handler: function(newVal, oldVal){
                if(newVal=='a5'){
                    this.initPage();
                }
            },
            deep: true
        },
        "dataList": function () {
            let _this = this;
            this.initPage();
        },
    },
    methods: {
        // cellStyle({row, column, rowIndex, columnIndex}){
        //     if(rowIndex ===  this.dataList['list1'].length-1){ //指定坐标rowIndex ：行，columnIndex ：列
        //         return 'background:#F5F7FA' //rgb(105,0,7)
        //     }else{
        //         return ''
        //     }
        // },
        initPage(){
            let _this = this;
            let list3= _this.dataList.list3 || [];//雷达图和柱状图科目
            let list2=_this.dataList.list2 || [];//柱状图班级                              
            let name = [];
            let knowledgeName = []; //雷达图-科目
            let knowledgeNames= ['语文','数学','英语','物理','化学','生物','历史','地理','政治'];
            list2.forEach((item,index)=>{
                name.push(item.className);
            })
            knowledgeNames.forEach((item,index)=>{
                knowledgeName.push({name: item});
            })
            _this.className = name;
            setTimeout(()=>{
                _this.getSubjectAnaly(list2);
                _this.getSubjectRadar(list2, knowledgeName);
                _this.getClassAnaly(list3);   
            }, 100)
        },
        //求和
        getSummaries(param){
            let _this =this;            
            this.$nextTick(() => {//第一次加载合计行不显示问题，重新渲染一次
                _this.$refs.multipleTable.doLayout();
            });
            const { columns, data } = param;
            const sums = [];
            let gradeList = this.dataList['list1'] && this.dataList['list1']['gradeList']&&this.dataList['list1']['gradeList'][0];
            if(!gradeList){ return false; }
            columns.forEach((column, index) => {
                if(gradeList[column['property']] && gradeList[column['property']]!==0){
                    sums.push(gradeList[column['property']]);         
                }else{
                    sums.push('-');
                }       
            });               
            return sums;
        },
         //班级看板（行政班）
        toClassKanban(row){
            let params = {
                className:row.className,
                classId:row.classId,//班级ID
                isScoreType: this.dataList['grade'] == 17, //分数类型 0原始分 1等级分   高三才有等级分，其他默认原始分
                scoreType: this.searchForms.scoreType,//0原始分 1等级分
                yearly: this.searchForm.yearly,
                testId: this.dataList['testIdA'],
                testIdA: this.dataList['testIdA'],//考试批次ID
                testIdB: this.dataList['testIdB'],
                subjectId: row.subjectId,
                subjectName: row.subjectName,
                grade: this.searchForm.grade,//年级
                classType: row.classType,//classType: 0行政班；1教学班；
            }
            this.$emit('classTo1', params);
        },
        //科目 雷达图
        getSubjectRadar(list, knowledgeName){
            let datas = [];
            let max = [];
            let min = [];
            list.forEach((item,index)=>{
                let ssArray = [];
                item.ssArray.forEach((ssItem,ssIndex)=>{
                    if(ssItem==null){
                        ssItem = '';
                    }
                    ssArray.push(ssItem);
                })
                datas.push({['data'+index]: ssArray})
                max.push(Math.max(...ssArray));
                min.push(Math.min(...ssArray));
            })
            datas.forEach((items,indexs) => {  //雷达图科目的值为null时，显示空  
                let ldNums = items['data'+indexs];
                for(var z=0;z<ldNums.length;z++){
                    if(!ldNums[z]){
                        ldNums[z] = '';
                    }
                }
            });
            this.className.forEach((item,index)=>{
                let data = {
                    data0: datas[index]['data'+index],
                };
                if(knowledgeName && knowledgeName.length){
                    knowledgeName.forEach((inItem, inIndex)=>{
                        if(max[index]==min[index]){
                            min[index]=null;
                        }
                        knowledgeName[inIndex]['max']=max[index];//
                        knowledgeName[inIndex]['min']=min[index];//
                    })
                }
                let options = {
                    id: 'class'+index+'0', 
                    title: '',
                    color0: '#89CD25',
                    indicator: knowledgeName,
                    legend: knowledgeName,
                    seriesName: '',
                    seriesData: [
                        {
                            value: datas[index]['data'+index],
                        }
                    ]
                };
                radarChart(data, options);
            })
        },
        //科目  柱状图
        getSubjectAnaly(list){
            let datas = [];
            list.forEach((item,index)=>{
                datas.push({['data'+index]: item.ssArray})
            })
            this.className.forEach((item,index)=>{
                let data = {
                    data0: (datas[index] && datas[index]['data'+index]) || [],
                };
                let options = {
                    id: 'class'+index+'1', 
                    color0: '#BF0000',               
                    legend: [''],
                    title: {
                        text: '',
                        x:'center',
                        y:'top',
                        textAlign:'left'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['语文','数学','英语','物理','化学','生物','历史','地理','政治'],
                            axisTick: {
                                alignWithLabel: true
                            },
                        }
                    ],
                };
                barLine(data, options);
            })           
        },
        /**
         * 班级 柱状图
         */
        getClassAnaly(list){
            let _this = this;
            let datas = [];
            list.forEach((item,index)=>{
                datas.push({['data'+index]: item});
            })
            _this.subjectName.forEach((item,index)=>{
                if(!datas[index]) {datas[index]=''}
                let data = {
                    data0: datas[index]['data'+index],
                };
                let options = {
                    id: 'subject'+index, 
                    color0: '#BF0000',               
                    legend: [''],
                    title: {
                        text: '',
                        x:'center',
                        y:'top',
                        textAlign:'left'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _this.className,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function(value) {
                                    return value.split("").join("\n");
                                }
                            }
                        }
                    ],
                };
                barLine(data, options);
            })  
        },
    }
}
</script>
<style lang="scss" scoped>

</style>